<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./css/tail.css">
</head>

<body>
    <div class="Sephora">
        <a href="#">
            <p>S&nbsp;E&nbsp;P&nbsp;H&nbsp;O&nbsp;R&nbsp;A <span>欢迎注册</span> </p>
            <div class="Sephore">
                已有账号？
                <a href="./login.html" style="color:#ccc;">立即登录<strong></strong></a>
            </div>
        </a>
    </div>


    <div class="Sephora_s">
        <div class="Sephora_e"></div>
        <div class="Sephora_f">
            <div class="Sephora_d"></div>
            <div class="Sephora_c">
                <span>手机号</span><input type="text" id="demon" placeholder="请输入你的手机号"> <strong></strong><br>
                <span>用户名</span><input type="text" class="username"><br>
                <span>邮箱</span><input type="text" class="email"> <br>
                <span>输入密码</span><input type="password" id="demod" placeholder="8-16位大小写字母和数字的组合"> <strong></strong><br>
                <span>确认密码</span><input type="password" placeholder="请在此输入密码" class="confirm_pwd"> <strong></strong><br>
                <div class="Sephora_v"><a href="javascript:void(0)">同意条款并注册</a></div>
                <span class="register_tip"></span>
                <div class="agreement">
                    <input type="checkbox">
                    <div class="navcat"> <em>已阅读并同意</em>《丝芙兰用户服务协议》<em>和</em>《丝芙兰隐私政策》</div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="footer_sfl">
        <span> </span>
        <ul class="footer_le">
            <li><img src="./img/t3.jpg" alt=""> 沪公网安备 31010602003121号</li>
            <li>ICP备案序号:沪ICP备05026645号-1</li>
            <li>食品经营许可证</li>
            <li>网站使用条款</li>
            <li>严正声明</li>
        </ul>
        <div class="footer_ri">
            本网站隶属于丝芙兰（上海）化妆品销售有限公司（企业法人营业执照）预付卡信息对接唯一标识 : 310101F5201530100309
        </div>
    </div>
    <script>
        // 手机号验证
        let demon = document.getElementById("demon");
        demon.oninput = function () {
            let str = this.value;
            let reg = /^1[3-9][0-9]{9}$/;
            if (reg.test(str)) {
                this.nextElementSibling.innerHTML = "正确";
            } else {
                this.nextElementSibling.innerHTML = "请填写正确手机号!";
            }
        }
        //密码验证
        let demod = document.getElementById("demod");
        let pwd
        demod.oninput = function () {
            let str = this.value;
            pwd = this.value
            let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
            if (reg.test(str)) {
                this.nextElementSibling.innerHTML = "正确";
            } else {
                this.nextElementSibling.innerHTML = "请输入正确密码!";
            }
        }
        let confirm_pwd = document.querySelector('.confirm_pwd')
        confirm_pwd.oninput = function(){
            let str = this.value
            if(str == pwd){
                this.nextElementSibling.innerHTML = "一致";
            }else{
                this.nextElementSibling.innerHTML = "两次输入的密码不一致!";
            }
        }

        let agreement_check = document.querySelector('.agreement input')
        let Sephora_v = document.querySelector('.Sephora_v')
        let Sephora_v_a = document.querySelector('.Sephora_v a')
        let register_tip = document.querySelector('.register_tip')
        let username = document.querySelector('.username')
        let email = document.querySelector('.email')
        Sephora_v_a.onclick = function(){
            if(agreement_check.checked + confirm_pwd.nextElementSibling.innerHTML + demod.nextElementSibling.innerHTML + demon.nextElementSibling.innerHTML == 'true一致正确正确'){
                let ajax = new XMLHttpRequest
                ajax.open('post','http://localhost:65535/register',true)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4 && ajax.status == 200){
                        if(JSON.parse(ajax.response).code == 1){
                            register_tip.innerHTML = '注册成功,三秒后跳转,请稍等'
                            setTimeout(() => {
                                location.href = 'http://localhost:65535/login.html'
                            }, 3000);
                        }else{
                            register_tip.innerHTML = '注册失败,用户名重复'
                        }
                    }
                }
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                ajax.send(`username=${username.value}&password=${demod.value}&email=${email.value}&tel=${demon.value}`)
            }else{
                register_tip.innerHTML = '请检查手机号，密码是否正确或协议是否勾选'
            }
        }
    </script>
</body>

</html>